<template>
  <div class="notice-wrapper">
    <div class="content-wrapper">
      <img class="icon" src="@/assets/img/noice.png" />
      <div ref="swiperTop" class="swiper-container">
        <div class="swiper-wrapper">
          <div v-for="item in dataList" :key="item.id" class="swiper-slide">
            <span class="text-[#535353] text-[16px] mr-4">{{ item.name }}</span>
            <span class="text-[#999999] text-[12px]">{{ item.time }}</span>
          </div>
        </div>
      </div>
      <ReadMore />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import ReadMore from '@/components/index/ReadMore.vue'
export default Vue.extend({
  components: { ReadMore },
  data() {
    return {
      dataList: [
        {
          id: 1,
          name: '关于招商系统上线安排的公告',
          time: '2022-4-12',
        },
        {
          id: 2,
          name: '关于资源综合利用增殖政策的公告',
          time: '2022-4-30',
        },
        {
          id: 4,
          name: '关于高新技术企业的公告',
          time: '2022-4-12',
        },
        {
          id: 5,
          name: '关于疫情防控安排的公告',
          time: '2022-4-30',
        },
      ],
    }
  },
  head: {
    title: '',
  },
  mounted() {
    const swiper = new this.$Swiper(this.$refs.swiperTop, {
      loop: true,
      autoplay: true,
      // spaceBetween: 10,
      direction: 'vertical',
      // centeredSlides: true,
      slidesPerView: 2,
      watchSlidesVisibility: true,
    })

    console.log(swiper)
  },
})
</script>
<style lang="scss" scoped>
.notice-wrapper {
  height: 90px;
  background-color: #fff;
  display: flex;
  align-items: center;

  .content-wrapper {
    width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .icon {
      width: 50px;
      margin-right: 20px;
    }

    .swiper-container {
      flex: 1;
      height: 70px;
      overflow: hidden;

      .swiper-wrapper {
        .swiper-slide {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
